<script setup>

const emits = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请输入'
  }

})
const iptChange = e => {
  emits('update:modelValue', e.target.value)
}
</script>

<template>
  <div class="my-input">
    <input type="text" class="ipt" @input="iptChange" :value="props.modelValue" :placeholder="props.placeholder" />
  </div>
</template>

<style scoped lang="scss">
.my-input {
  pointer-events: all;
  width: 100%;

  .ipt {
    width: 100%;
    background-color: rgba(41, 45, 60, 0.21);
    border: 2px solid #434d62;
    border-radius: 4px;
    height: 56px;
    line-height: 56px;
    color: #fff;
    letter-spacing: 3px;
    text-indent: 10px;
    transition: all .3s;

    &::placeholder {
      color: rgba(181, 196, 208, 0.5);
    }

    &:focus {
      outline: none;
      border-color: #1979BD;
    }
  }
}
</style>